<script setup lang="ts">
import {McpResponse} from "@/views/ai/agent/x6/mcp/types";

const props = defineProps({
  mcpResult: Object as PropType<McpResponse>
});
const msgs=computed(()=>{
  if (props.mcpResult){
    return JSON.parse(props.mcpResult.responseData) as any[]
  }
  return []
})
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">AI智能产品推荐</div>
    <div v-for="m in msgs" :key="m.id" class="product-card">
      <div class="product-card-img">
        <el-image style="width: 80px;height: 80px" :src="m.picUrl" fit="fill"/>
      </div>
      <div class="product-card-body">
        <div class="product-card-title">
          {{m.name}}
        </div>
        <div>
          售价: {{m.price/100}}元
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product-card{
  display: flex;
  flex-direction: row;
  gap: 5px;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 5px;
  .product-card-img{
    width: 80px;
    height: 80px;
  }
  .product-card-body{
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .product-card-title{
    font-weight: bold;
  }
}
</style>
